import React from 'react';
import {Form, Input, Row, Col, Checkbox, Button, message} from 'antd';
import logo from '@/assets/img/DLUTBadge.webp'
import './Register.less'
import memoryUtils from "../../utils/memoryUtils";
import storageUtils from "../../utils/storageUtils";
import {reqRegister} from '../../api'
import Validation from "../Validation/Validation";
import {Redirect} from "react-router-dom";

// import HCaptcha from '@hcaptcha/react-hcaptcha';


const formItemLayout = {
    labelCol: {
        xs: {span: 24},
        sm: {span: 8},
    },
    wrapperCol: {
        xs: {span: 24},
        sm: {span: 16},
    },
};

const tailFormItemLayout = {
    wrapperCol: {
        xs: {
            span: 24,
            offset: 0,
        },
        sm: {
            span: 16,
            offset: 8,
        },
    },
};

interface user {
    name: string,
    password: string,
    email: string,
    student_id?: string,
    verify_code?: string,
}

interface User {
    name: string,
    email: string,
    photo: string,
    user_id: number,
    slogan: string,
    student_id: string,
    session_id: number,
    last_login_at: string
}


function Register() {

    const [form] = Form.useForm();

    const onFinish = async (values: any) => {

        const {name, password, email, student_id} = values
        const user: user = {name, password, email, student_id}
        const result: { status: number, data: User } = await reqRegister(user)

        if (result.status === 200) {
            message.success('注册成功！');
            const user = result.data;
            memoryUtils.user = user;
            storageUtils.saveUser(user);
            return <Redirect to={'/login'}/>
        }
    };

    return (
        <div className={"register"}>

            <header className={'register-header'}>
                <img src={logo} alt="DLUT badge"/>
                <h1>OurEDA 网盘注册新用户</h1>
            </header>

            <div className={'register-content'}>
                <h2>欢迎注册！</h2>
                <Form
                    {...formItemLayout}
                    form={form}
                    name="register"
                    onFinish={onFinish}
                    scrollToFirstError
                >

                    <Form.Item
                        name="name"
                        label="Nickname"
                        tooltip="What do you want others to call you?"
                        rules={[
                            {required: true, message: 'Please input your nickname!', whitespace: true}
                        ]}
                    >
                        <Input/>
                    </Form.Item>

                    <Form.Item
                        name="email"
                        label="E-mail"
                        tooltip="Please input your email "
                        rules={[
                            {
                                type: 'email',
                                message: 'The input is not valid E-mail!',
                            },
                            {
                                required: true,
                                message: 'Please input your E-mail!',
                            },
                            {
                                pattern: /^([a-zA-Z]|[0-9])(\w|-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/,
                                message: '请输入正确的邮箱'
                            }
                        ]}
                    >
                        <Input/>
                    </Form.Item>

                    <Form.Item
                        name="student_id"
                        label="student_id"
                        rules={[
                            {type: "string", required: true, whitespace: true, message: '学号必须输入!'},
                            {max: 11, message: '最多为11位!'},
                            {min: 9, message: '最少为9位!'},
                            {pattern: /(^\d{9,11}$)/, message: '请输入正确的学号!'},
                        ]}
                        tooltip="You can chose  student id"
                    >
                        <Input/>
                    </Form.Item>

                    <Form.Item
                        name="password"
                        label={'password'}
                        rules={[
                            {type: "string", required: true, whitespace: true, message: '密码必须输入!'},
                            {max: 15, message: '最多为15位!'},
                            {min: 8, message: '最少为8位!'},
                            {pattern: /^[a-zA-Z0-9]{8,15}$/, message: '请输入正确的密码!'},
                        ]}
                        hasFeedback
                        tooltip="The password consists of letters and numbers. The maximum value is 15  Bits, minimum 8 bits  "
                    >
                        <Input.Password/>
                    </Form.Item>
                    <Form.Item
                        name="confirm"
                        label="Confirm Password"
                        dependencies={['password']}
                        hasFeedback
                        tooltip="Please enter your password again to confirm"
                        rules={[
                            {
                                required: true,
                                message: 'Please confirm your password!',
                            },
                            ({getFieldValue}) => ({
                                validator(_, value) {
                                    if (!value || getFieldValue('password') === value) {
                                        return Promise.resolve();
                                    }
                                    return Promise.reject(new Error('The two passwords that you entered do not match!'));
                                },
                            }),
                        ]}
                    >
                        <Input.Password/>
                    </Form.Item>

                    <Form.Item
                        label="Captcha">
                        <Row gutter={8}>
                            <Col span={12}>
                                <Form.Item
                                    name="captcha"
                                    noStyle
                                    rules={[
                                        {required: true, message: 'Please input the captcha you got!'},
                                        () => ({
                                            validator(_, value) {
                                                console.log(memoryUtils.result.join(''), value)
                                                if (memoryUtils.result.join('') === value) {
                                                    return Promise.resolve();
                                                }
                                                return Promise.reject(new Error('验证码错误！'));
                                            },
                                        }),
                                    ]}
                                >
                                    <Input/>
                                </Form.Item>
                            </Col>
                            <Validation/>
                        </Row>

                    </Form.Item>

                    <Form.Item
                        name="agreement"
                        valuePropName="checked"
                        rules={[
                            {
                                validator: (_, value) =>
                                    value ? Promise.resolve() : Promise.reject(new Error('Should accept agreement')),
                            },
                        ]}
                        {...tailFormItemLayout}
                    >
                        <Checkbox>
                            I have read the <a href="">agreement</a>
                        </Checkbox>
                    </Form.Item>

                    {/*<HCaptcha*/}
                    {/*    sitekey="7ce7c5df-08d2-4881-a4fc-6e4ac500706a"*/}
                    {/*    onVerify={(token)=>{*/}
                    {/*        console.log("token:",token)*/}
                    {/*    }}*/}
                    {/*/>*/}

                    <Form.Item {...tailFormItemLayout}>
                        <Button type="primary" htmlType="submit">
                            Register
                        </Button>
                    </Form.Item>

                </Form>
            </div>

        </div>
    );

}

export default Register;